import React, { forwardRef } from "react";
import { Form, Input, Select, DatePicker, Row, Col } from "antd";
const { RangePicker } = DatePicker;

const statusList = [
  { label: "全部", value: null },
  { label: "未完成", value: 1 },
  { label: "已完成", value: 2 },
]

const markList = [
  { value: null, label: '全部' }, 
  { value: 0, label: '未收藏' }, 
  { value: 1, label: '已收藏' }
]

const FilterForm = forwardRef(({ initialValues, setFilterForm, filterOptions }, ref) => {
  const [form] = Form.useForm();
  const { projectList, languageList, typeList } = filterOptions

  // 获取
  return (
    <Form
      layout="inline"
      form={form}
      onValuesChange={(_, values) => {
        setFilterForm(values);
      }}
      initialValues={initialValues}
      ref={ref}
      style={{ marginBottom: 16 }}
    >
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Form.Item label="项目名称" name="project_id">
            <Select options={(projectList || []).map(item => ({ label: item.value, value: item.id }))} />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="语言" name="language_id">
            <Select options={(languageList || []).map(item => ({ label: item.value, value: item.id }))} />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="状态" name="status">
            <Select options={statusList} />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="类型" name="type_id">
            <Select options={(typeList || []).map(item => ({ label: item.value, value: item.id }))} />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="是否收藏" name="mark">
            <Select options={markList} />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="内容" name="content">
            <Input />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label="任务时间" name="taskTime">
            <RangePicker />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
});

export default FilterForm;
